<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .容器 {
            position: relative;
            margin: 0 auto;
            width: 440px;
            height: 440px;
            background-color: blanchedalmond;
        }
        .小球 {
            position: absolute;
            width: 30px;
            height: 30px;
            left: 0;
            top: 0;
            background-color: orange;
            border-radius: 15px;
        }
        .挡板 {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 10px;
            width: 80px;
            border-radius: 50px;
            background-color: red;
        }
        .失败提示 {
            position: absolute;
            top: 50%;
            width: 100%;
            font-size: 24px;
            color: red;
            font-weight: bolder;
            text-align: center;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div id="应用">
        <div class="容器">
            <div class="挡板" :style="{left: 挡板横坐标 + 'px'}"></div>
            <div class="小球" :style="{left: 小球横坐标 + 'px', top: 小球纵坐标 + 'px'}"></div>
            <div class="失败提示" v-if="失败状态">游戏失败!</div>
        </div>
    </div>
</body>
<script>
    const 应用 = {
        data() {
            return {
                挡板横坐标: 0,
                小球横坐标: 0,
                小球纵坐标: 0,
            }
        },
        mounted() {
            this.任意键()
            this.横速度 = Math.random() + 0.1
            this.纵速度 = Math.random() + 0.1
            this.定时器 = setInterval(
                () => {
                    if(this.小球横坐标 + this.横速度 >= 440 - 30) {
                        this.横速度 *= -1
                    }
                    if(this.小球横坐标 + this.横速度 <= 0 ) {
                        this.横速度 *= -1
                    }
                    if(this.小球纵坐标 + this.纵速度 <= 0) {
                        this.纵速度 *= -1
                    }
                    this.小球横坐标 += this.横速度 
                    this.小球纵坐标 += this.纵速度
                    if(this.小球纵坐标 >= 440 - 30 - 10) {
                        if(this.挡板横坐标 <= this.小球横坐标 + 15 && this.挡板横坐标 + 80 >= this.小球横坐标 + 15) {
                            this.纵速度 *= -1
                        } else {
                            clearInterval(this.定时器)
                            this.失败状态 = true
                        }
                    }
                },
                2
            )
        },
        methods: {
            键下(事件) {
                if (事件.key == 'ArrowLeft') {
                    if(this.挡板横坐标 > 15) {
                        this.挡板横坐标 -= 20
                    }
                } else if (事件.key == 'ArrowRight') {
                    if(this.挡板横坐标 + 80 < 440 -15) {
                        this.挡板横坐标 += 20
                    }
                }
            },
            任意键() {
                document.addEventListener('keydown', this.键下)
            },
        },
    }
    Vue.createApp(应用).mount('#应用')
</script>
</html>